<template>
    <div>
        <div style="margin-top: 15px;display: flex;justify-content: space-between;">
            <el-form :inline="true" :model="forObject" class="demo-form-inline" >
                <el-form-item>
                    <el-input v-model="forObject.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="_page">查询</el-button>
                    <el-button type="primary" icon="el-icon-bottom">高级搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <ElementTable ref="pageTable"
                          :pageColumns="pageColumns"
                          :optBtn="optBtn"
                          :btnList="btnList"
                          :optWidth=130
                          :url="url"
                          :formObject="forObject"
                          :loading="loading"
                          @optClick="optClick"
                          @btnListClick="btnListClick">

            </ElementTable>
        </div>

        <SysRoleRelMenu ref="refSysRoleRelMenu" @page="_page"></SysRoleRelMenu>
        <SysRoleMenu ref="refSysRoleMenu" @page="_page"></SysRoleMenu>
        <SysRoleEdit ref="refSysRoleEdit" @page="_page"></SysRoleEdit>
    </div>

</template>

<script>
    import ElementTable from '../../../components/base/ElementTable'
    import SysRoleRelMenu from './SysRoleRelMenu'
    import SysRoleMenu from './SysRoleMenu'
    import SysRoleEdit from './SysRoleEdit'
    import {deleteReq} from "../../../utils/api";
    export default {
        name: "UserManage",
        components:{
            ElementTable,
            SysRoleMenu,
            SysRoleEdit,
            SysRoleRelMenu
        },
        mounted() {
            this._page()
        },
        data(){
            return{
                selectIds:[],
                forObject:{
                   name:undefined
                },
                url:'/api/sys_role/page_vo',
                loading:true,
                pageColumns:[
                    {key:'roleName',title:'角色名称',width:600},
                    {key:'parentName',title:'上级角色',width:600}
                ],

                optBtn:[
                    {icon:'el-icon-edit',name:'编辑',id:''},
                    {icon:'el-icon-menu',name:'菜单权限',id:''},
                    {icon:'el-icon-s-grid',name:'菜单管理',id:''},
                    {icon:'el-icon-delete',name:'删除',id:''},
                ],
                btnList:[
                    {icon:'el-icon-plus',type:'success',name:'导入数据',id:''},
                    {icon:'el-icon-plus',type:'success',name:'导出数据',id:''},
                    {icon:'el-icon-plus',type:'primary',name:'新增角色',id:''}
                ],

                getPage: {},
            }
        },
        methods:{
            optClick(data){
                switch (data.name) {
                    case '编辑':
                        this.edit(data.obj.id)
                        break
                    case '删除':
                        this.deleteById(data.obj.id)
                        break
                    case '菜单权限':
                        this.addMenuAuthority(data.obj.id)
                        break
                    case '菜单管理':
                        this.menuManage(data.obj.id)
                        break
                    case 'selectData':
                        let ids = []
                        if (data.obj.length==0){
                            this.selectIds=[]
                        }else {
                            data.obj.forEach(function (item,value) {
                                ids[value]=item.id
                            })
                        }
                        this.selectIds = ids
                        break
                }
            },

            btnListClick(name){
                switch (name) {
                    case '新增角色':
                        this.edit()
                        break
                }
            },


            _page(){
                this.$refs.pageTable.page()
            },
            addMenuAuthority(id){
                this.$refs.refSysRoleRelMenu.open(id)
            },


            menuManage(id){
                this.$refs.refSysRoleMenu.open(id)
            },


            //编辑
            edit(id){
                this.$refs.refSysRoleEdit.open(id)
            },


            deleteById(id) {
                this.$confirm('是否确认删除角色?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    deleteReq('/api/sys_role/delete?id='+id,{}).then(res=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this._page()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
</script>

<style scoped>

</style>